<template>
	<view>
		<custom-nav/>
		<view class="tab-cont flex justify-around padding text-center">
			<view 
				v-for="(item,index) in tabArr" 
				:key="item.bid" 
				:class="['tab-item',{'text-gray':tabIdx!=index}]"
				@click="handleTab(index)"
			>
				{{item. title}}
			</view>
		</view>
		<cake-list :bid="tabArr[tabIdx].bid" :page="page"></cake-list>
		<foot-bar :active="1"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabArr: [{
						title: '蛋糕',
						bid: 1
					},
					{
						title: '面包',
						bid: 11
					},
					{
						title: '小食',
						bid: 6
					},
					{
						title: '配件',
						bid: 5
					},
				],
				tabIdx: 0,
				page:0
			}
		},
		//检测处理
		onReachBottom() {
			console.log('触底了');
			this.page++
		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			this.page = 0
		},
		methods: {
			handleTab(index) {
				this.tabIdx=index
				this.page=0
			}
		},
	}
</script>

<style lang="scss">
	body,page{
		padding-top: 100upx;
	}
	.tab-cont{
		position: fixed;
		top: 100upx;
		left: 0;
		width: 100%;
		z-index: 1;
		background-color: #fff;
	}
	.tab-item {
		position: relative;
		width: 25%;

		&::after {
			content: '';
			height: 30upx;
			width: 1upx;
			background-color: orange;
			position: absolute;
			right: 0;
			top: 50%;
			transform:scaleX(0.5) translateY(-50%);
		}
		&:last-child::after{
			width: 0;
		}
	}
</style>